﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AjaxChat.WebApp._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>商汇聊天室</title>
<script language="javascript" type="text/javascript" src="JavaScript/jquery-1.4.min.js"></script>
<script language="javascript" type="text/javascript">
//配置对角
var _config = new Object({
    url:"AjaxPages/AjaxChatRequest.ashx",
    async:false,
    dataType:"json",
    type:"POST",
    msgID:<%=Application["maxCount"].ToString()%>-1,
    msgName:"Guest",
    msgIP:"<%=Request.UserHostAddress%>"
});

var ChatMsgObjArray = new Array()
ChatMsgObj = function(){
    this.msgID;
    this.msgName;
    this.msgIP;
    this.msgTime;
    this.msgText;
}

//开始运行的
$(document).ready(function(){
    GetMsgJsonInfo();
});

function GetMsgJsonInfo()
{
    GetMsgIDToLastJson(_config.msgID);
}

//修改名字
function ChangeMsgName(btn)
{
    var _msgName=$("#txtMsgName").val();
    if(_msgName!="")
    {
        _msgName=_msgName.substring(0,8);
        _config.msgName=_msgName;
        btn.disabled=true;
        $("#SendMsg_ShowMsg").text("姓名修改成功");
    }else
    {
        $("#SendMsg_ShowMsg").text("姓名不能为空");
    }
}

//得到一个ID后的所有消息
function GetMsgIDToLastJson(LastID)
{
    $.ajax({
        url:_config.url,
        data:{"_type":"GetLastToEnd","LastID":LastID},
        async:_config.async,
        dataType:_config.dataType,
        type:_config.type,
        success:function(data){
            //SetSaveObjArray(data);
            BindObjJson(data);
            if(data.length!=0)
            {
                _config.msgID=data[data.length-1]["msgID"];
            }
            setTimeout(GetMsgJsonInfo,1000);
        }
    });
}

//保存实体对象
function SetSaveObjArray(data)
{
    for(var i=0;i<data.length;i++)
    {
        var _obj = new ChatMsgObj();
        _obj.msgID=data[i]["msgID"];
        _obj.msgName=data[i]["msgName"];
        _obj.msgIP=data[i]["msgIP"];
        _obj.msgTime=data[i]["msgTime"];
        _obj.msgText=data[i]["msgText"];
        ChatMsgObjArray.push(_obj);
    }
}

//绑定对角
function BindObjJson(data)
{
    for(var i=0;i<data.length;i++)
    {
        var _html = "<div class=\"ShowMsg\"><div><span class=\"ShowSpanName\">"+data[i]["msgName"]+"</span><span class=\"ShowSpanIP\">"+data[i]["msgIP"]+"</span><span class=\"ShowSpanTime\">"+data[i]["msgTime"]+"</span></div><div class=\"ShowMsgText\"><p id=\"ShowMsg_P"+data[i]["msgID"]+"\"></p></div></div>";
        $("#Main_Show_Msg").append(_html);
        $("#ShowMsg_P"+data[i]["msgID"]).text(data[i]["msgText"]);
        getScrollToEnd();
    }
}

//发送对象
function SendObj()
{
    var _obj = new ChatMsgObj()
    _obj.msgName=_config.msgName;
    _obj.msgIP=_config.msgIP;
    _obj.msgTime=Date().toString();
    _obj.msgText=$("#msgText_textarea").val();
    
    if(_obj.msgText=="")
    {
        return;
    }
    
    $.post(_config.url,{"_type":"SendChatMsg","msgName":_obj.msgName,"msgIP":_obj.msgIP,"msgTime":_obj.msgTime,"msgText":_obj.msgText},function(data){
        $("#msgText_textarea").val("");
        document.getElementById("msgText_textarea").focus();
        $("#SendMsg_ShowMsg").text("信息发送成功"+data["msgTime"]);
    },_config.dataType);
}
//移动流动条
function getScrollToEnd()
{
    var MsgDiv=document.getElementById("Main_Show_Msg");
    MsgDiv.scrollTop = MsgDiv.scrollHeight - MsgDiv.clientHeight;
}
//Ctrl+Enter
function CtrlAndEnter(e)
{
    if(e.ctrlKey && e.keyCode==13)
    {
        SendObj();
    }
}
//窗口高度
function SetWindwosHeight()
{
    var clientHeight=document.body.clientHeight;
    var showHeight=clientHeight*0.7;
    document.getElementById("Main_Show_Msg").style.height=showHeight;
    document.getElementById("msgText_textarea").style.height=clientHeight*0.15;
    document.getElementById("msgText_button").style.height=clientHeight*0.16;
    
}
</script>
<style type="text/css">
.ShowMsg{}
.ShowMsgText{
    padding-left:20px;
}
.ShowSpanName{
    color:Blue;
}
.ShowSpanIP{
    color:Gray;
}
.ShowSpanTime{
    color:Red;
}
.SendMsgText{
    width:100%;
    height:92px;
}
.SendMsgButton{
    background-color:Gray; 
    height:100px; 
    width:100%;
}
.SendButtonSpan{
    font-size:30px;
}
#Main_Show_Msg
{
    height:500px;
    overflow:scroll;
}
#SendMsg{
    height:100px;
}
</style>
</head>
<body>
<div>
<div id="Main_Show">
    <fieldset>
        <legend>消息显示区</legend>
        <div id="Main_Show_Msg">
            <div class="ShowMsg">
                <div>
                    <span class="ShowSpanName">LiuJu</span>
                    <span class="ShowSpanIP">192.168.0.28</span>
                    <span class="ShowSpanTime">2010-01-22 11:00:00</span>
                </div>
                <div class="ShowMsgText">
                    <p>版本1.0.2.1 Bete</p>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<div id="Main_Send">
    <fieldset>
        <legend>消息发送区<input type="text" id="txtMsgName" value="Guest" /><input type="button" value="改变名字" onclick="ChangeMsgName(this)" /><span id="SendMsg_ShowMsg" style="color:Red;">请先修改你的名字</span></legend>
        <div id="SendMsg">
            <table style="width:100%;">
            <tr>
                <td style="width:90%;"><textarea class="SendMsgText" id="msgText_textarea" onkeydown="CtrlAndEnter(event)"></textarea></td>
                <td><button class="SendMsgButton" onclick="SendObj()" id="msgText_button"><span class="SendButtonSpan">发送</span></button></td>
            </tr>
            </table>
        </div>
    </fieldset>
</div>
</div>
</body>
</html>
